<script lang="ts" setup>
import type { FormInstance } from 'element-plus';

import { reactive, ref } from 'vue';

import {
  ElButton,
  ElDialog,
  ElForm,
  ElFormItem,
  ElInput,
  ElMessage,
  ElRadio,
  ElRadioGroup,
} from 'element-plus';

import { addObj, editObj, getById } from '#/api/upms/storage-config';
import { useDict } from '#/utils/dict';

const emit = defineEmits(['initPage']);

const { sys_storage_type, status } = useDict('sys_storage_type', 'status');

const state = reactive({
  form: {
    id: '',
    type: '',
    accessKey: '',
    accessSecret: '',
    endpoint: '',
    bucket: '',
    dir: '',
    status: '',
  },
  rules: {
    type: [
      {
        required: true,
        message: '请选择文件存储类型',
        trigger: 'change',
      },
    ],
    accessKey: [
      {
        required: true,
        message: '请输入AccessKey',
        trigger: 'change',
      },
    ],
    accessSecret: [
      {
        required: true,
        message: '请输入AccessKeySecret',
        trigger: 'change',
      },
    ],
    endpoint: [
      {
        required: true,
        message: '请输入endpoint',
        trigger: 'change',
      },
    ],
    bucket: [
      {
        required: true,
        message: '请输入bucket',
        trigger: 'change',
      },
    ],
    status: [
      {
        required: true,
        message: '请选择状态',
        trigger: 'change',
      },
    ],
  },
});

const dialog = ref(false);
const loading = ref(false);
const formRef = ref();
const initForm = (row: any) => {
  if (row && row.id) {
    getDetail(row.id);
  }
  dialog.value = true;
};
const getDetail = (id: string) => {
  loading.value = true;
  // 修改
  getById(id)
    .then((response: any) => {
      loading.value = false;
      state.form = response;
    })
    .catch(() => {
      loading.value = false;
    });
};
/**
 * 关闭事件
 */
const handleClose = () => {
  resetForm(formRef.value);
};
/**
 * 重置表单
 */
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  state.form.id = '';
  loading.value = false;
  dialog.value = false;
  formEl.resetFields();
};
/**
 * 提交按钮
 */
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid) => {
    if (valid) {
      loading.value = true;
      if (state.form.id) {
        // 修改
        edit();
      } else {
        // 新增
        add();
      }
    }
  });
};
/**
 * 新增
 */
const add = () => {
  addObj(state.form)
    .then(() => {
      resetForm(formRef.value);
      ElMessage.success('新增成功');
      emit('initPage');
    })
    .catch(() => {
      loading.value = false;
    });
};
/**
 * 修改
 */
const edit = () => {
  editObj(state.form)
    .then(() => {
      resetForm(formRef.value);
      ElMessage.success('修改成功');
      emit('initPage');
    })
    .catch(() => {
      loading.value = false;
    });
};

defineExpose({
  initForm,
});
</script>
<template>
  <ElDialog
    v-model="dialog"
    :title="state.form.id ? '修改存储配置' : '添加存储配置'"
    width="50%"
    :before-close="handleClose"
  >
    <ElForm
      ref="formRef"
      :model="state.form"
      label-width="200px"
      :rules="state.rules"
    >
      <ElFormItem label="存储配置类型" prop="type">
        <ElRadioGroup v-model="state.form.type">
          <ElRadio
            v-for="item in sys_storage_type"
            :key="item.value"
            :value="item.value"
          >
            {{ item.label }}
          </ElRadio>
        </ElRadioGroup>
      </ElFormItem>
      <ElFormItem label="AccessKey" prop="accessKey">
        <ElInput v-model="state.form.accessKey" />
      </ElFormItem>
      <ElFormItem label="AccessKeySecret" prop="accessSecret">
        <ElInput v-model="state.form.accessSecret" />
      </ElFormItem>
      <ElFormItem label="endpoint" prop="endpoint">
        <ElInput v-model="state.form.endpoint" />
      </ElFormItem>
      <ElFormItem label="bucket" prop="bucket">
        <ElInput v-model="state.form.bucket" />
      </ElFormItem>
      <ElFormItem label="状态" prop="status">
        <ElRadioGroup v-model="state.form.status">
          <ElRadio v-for="item in status" :key="item.value" :value="item.value">
            {{ item.label }}
          </ElRadio>
        </ElRadioGroup>
      </ElFormItem>
    </ElForm>
    <template #footer>
      <span class="dialog-footer">
        <ElButton @click="handleClose">关 闭</ElButton>
        <ElButton
          type="primary"
          :loading="loading"
          @click="submitForm(formRef)"
        >
          确 认
        </ElButton>
      </span>
    </template>
  </ElDialog>
</template>
<style scoped>
.pay-tabs {
  margin-bottom: 30px;
}

.pay-form {
  margin-top: 20px;
}

.pay-input {
  width: 400px;
}

.pay-input-sm {
  width: 300px;
}

.upload-group {
  display: flex;
  gap: 12px;
  align-items: center;
}
</style>
